/*
* @Author: yanyanru
* @Date: 2018/4/13
* @description: 基金lp
*/
<template>
    <div class='custom-box m-t-20 p-20'>
        <div class="custom-title">
            <h3>基金LP</h3>
            <div class="pull-left m-l-20">
                <button type="button" class="custom-btn custom-btn-round" @click='showDialogForm'><i class="fa fa-plus"></i></button>
            </div>
        </div>
    <el-table   
        stripe
        :data="pageList"
        style="width:100%"
        class="m-t-20">
        <el-table-column
            prop="id"
            align="center"
            label="ID">
        </el-table-column>
        <el-table-column
            prop="companyName"
            align="center"
            label="LP／基金中文简称">
            <template slot-scope="scope">
                {{scope.row.companyName}}
            </template>
        </el-table-column>
        <el-table-column
            prop="promiseMoney"
            align="center"
            label="承诺金额">
            <template slot-scope="scope">
                {{scope.row.promiseMoney}} {{scope.row.promiseMoneyCurrency | getNameById('currencyType')}} 
            </template>
        </el-table-column>
        <el-table-column
            prop="investmentAmount"
            align="center"
            label="投资金额">
            <template slot-scope="scope">
                {{scope.row.investmentAmount}} {{scope.row.investmentAmountCurrency | getNameById('currencyType')}}
            </template>
        </el-table-column>
        <el-table-column
            prop="contextType"
            align="center"
            label="类型">
            <template slot-scope="scope">
                {{scope.row.contextType | getNameById('companyIdentity')}}
            </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
                <el-button type="text" v-if="scope.row.status !== 1" @click="related(scope.row)">关联</el-button>
                <el-button type="text" v-else  @click="related(scope.row)">取消关联</el-button>                       
                <el-button type="text" @click="goDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
     <div class="m-t-20">
        <el-pagination @current-change="handleCurrentChangeFundLp"
            :current-page="listPageIndex"
            :total="listTotalCount" :page-size="listPageSize"
            layout="prev, pager, next">
        </el-pagination>
    </div>
    <el-dialog title="基金LP" :visible.sync="outerVisible">
        <el-dialog
            :visible.sync="innerVisible"
            append-to-body>
            <el-table :data="searchList" stripe style="width:100%"
                            @cell-click="selectLp" v-loading="loading"
                            element-loading-text="Loading">
                <el-table-column prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="fullName" label="基金中文名">
                </el-table-column>
                <el-table-column prop="orgName" label="机构中文名">
                </el-table-column>
            </el-table>
            <div class="m-t-20 m-b-20">
                <el-pagination
                    small
                    @current-change="handleCurrentChangeLp"
                    :current-page="searchPageIndex"
                    :total="searchTotalCount" :page-size="searchPageSize" layout="prev, pager, next">
                </el-pagination>
            </div>
        </el-dialog>
        <el-form ref="lpForm" labelWidth='120px'>
            <el-row>
                <el-form-item label="基金LP类型">
                    <el-select v-model="companyOpenSearch.attribute" style="width:100px"  @change="changeLp">
                        <el-option
                            v-for="item in companyIdentity"
                            :key="item.id"
                            v-if="item.dictValue == '3' || item.dictValue == '4'"
                            :label="item.dictName"
                            :value="item.dictValue-0">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="LP名称" required>
                        <el-input
                            placeholder="搜索选择后在此显示"
                            style="width:100%"
                            v-model="companyOpenSearch.name"
                            @keyup.enter.native="searchFundInfoEvent"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-select 
                         v-model="companyOpenSearch.searchType"
                        placeholder="请选择" style="margin-top: 3px;margin-left: 15px">
                        <el-option v-for="item in myOpenSearchNameType" 
                            :key="item.dictValue"
                            :label="item.dictName"
                            :value="item.dictValue"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="8" style="margin-top: 3px">
                    <el-button type="primary" style="width:70px;margin-left: 15px" @click="searchFundInfoEvent()">搜索</el-button>
                </el-col>
            </el-row>
            <el-row class="m-b-10">
                <el-col :span="10">
                    <el-form-item label="承诺金额" prop="promiseMoney">
                        <el-input v-model="comFundLP.promiseMoney" placeholder="请输入内容" style="width:100%" type="number">
                            <template slot="append">万</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item  style="margin-left: 15px;margin-top: -1px" labelWidth='0'>
                        <el-select v-model="comFundLP.promiseMoneyCurrency" style='width:100%;'>
                            <el-option v-for="item in currencyType" :key="item.id" :label="item.dictName" :value="item.dictValue-0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="m-b-10">
                <el-col :span="10">
                    <el-form-item label="投资金额" prop="investMoney">
                        <el-input v-model="comFundLP.investmentAmount" placeholder="请输入内容" style="width:100%" type="number">
                            <template slot="append">万</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item style="margin-left: 15px;margin-top: -1px" labelWidth='0'>
                        <el-select v-model="comFundLP.investmentAmountCurrency">
                            <el-option v-for="item in currencyType" :key="item.id" :label="item.dictName" :value="item.dictValue-0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">   
            <el-button type="primary" @click="saveLp" round>保存</el-button>
            <el-button @click="outerVisible = false" round>取 消</el-button>
        </div>
    </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch, Prop } from 'vue-property-decorator';
import { CompanySearch, } from '../../../../../service/common/interface';
import CommonService from '../../../../../service/common/index';
import ComFundService from '../../../../../service/subject/company/fund-info/index';
import { ComFundLPDto, CompanyOpenSearchVO } from '../../../../../api/Interface';
import { CompanyOtherInfoSearchDto, } from '../../../../../service/subject/company/companyInterface';
@Component({
  components: { }
})
export default class BasicInfo extends Vue {
    @Prop({})
    public fundId: number;
    // 初始化数据 相当于data
    public currencyType: object[] = this.$store.state.user.dictionary.dicList.currencyType;
    public contextType: object[] = this.$store.state.user.dictionary.dicList.fundLPType;
    public companyIdentity: object[] = this.$store.state.user.dictionary.dicList.companyIdentity;
    public openSearchNameType: object[] = this.$store.state.user.dictionary.dicList.openSearchNameType; // 搜索
    public myOpenSearchNameType: object[] = [{dictName: '中文名称', dictValue: 'full_name'}, {dictName: '英文名称', dictValue: 'int_name'}];
    public companyOpenSearch: CompanySearch = {} as CompanySearch; // 搜索
    public comFundLP: ComFundLPDto = {} as ComFundLPDto; // 添加Dto
    public companyOtherInfoSearch: CompanyOtherInfoSearchDto = {} as CompanyOtherInfoSearchDto;
    public pageList: object[] = []; // 列表页list
    public listPageIndex: number = 1; // 列表页index
    public listPageSize: number = 10; // 列表页pageSize
    public listTotalCount: number = 111; //列表页总条数
    public searchList: object[] = []; // 搜索页List
    public searchPageIndex: number = 1; // 搜索页index
    public searchPageSize: number = 10; // 搜索页pageSize
    public searchTotalCount: number = 111; //搜索页总条数
    public outerVisible: boolean = false; // 外层弹出框
    public innerVisible: boolean = false; // 内层弹出框
    public searchLpList: object[] = []; // 搜索lp列表
    public loading: boolean = false;

    // refs
    public $refs: { };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
    return val + '***';
    }

    // 声明周期钩子
    // public mounted() {
    // }
    public created() {
        this.getComLpList();
    }
    // 列表页分页
    public handleCurrentChangeFundLp(val: number) {
        this.listPageIndex = val;
        this.getComLpList();
    }
    public showDialogForm() {
        this.outerVisible = true;
        this.companyOpenSearch = {} as CompanySearch;
        this.comFundLP = {} as ComFundLPDto;
        this.$set(this.companyOpenSearch, 'searchType', 'full_name');
    }
    public changeLp() {
        this.comFundLP = {} as ComFundLPDto;
        this.companyOpenSearch.name = ''; // 清空
    }
    // 获取lp列表
    public async getComLpList() {
        this.companyOtherInfoSearch['pageParam.pageIndex'] = this.listPageIndex;
        this.companyOtherInfoSearch['pageParam.pageSize'] = this.listPageSize;
        this.companyOtherInfoSearch.companyId = Number(this.$route.params.itemId);
        const res = await ComFundService.getFundLpList(this.companyOtherInfoSearch);
        if (res.resCode === '0') {
            this.pageList = res.data.resultData;
            this.listTotalCount = res.data.totalCount;
        }   
    }
    // 搜索列表
    public async searchFundInfoEvent() {
        this.innerVisible = true;
        this.loading = true;
        this.companyOpenSearch['pageParam.pageIndex'] = this.searchPageIndex;
        this.companyOpenSearch['pageParam.pageSize'] = this.searchPageSize;
        const res = await CommonService.getCompanySearch(this.companyOpenSearch);
        if (res.resCode === '0') {
            this.loading = false;
            this.searchList = res.data.resultData;
            this.searchTotalCount = res.data.totalCount;
        }
    }
    // 添加lp
    public saveLp() {
        if (!this.companyOpenSearch.name) {
            this.$message.warning('请填写LP名称!');
        } else {
            this.comFundLP.companyId = Number(this.$route.params.itemId);
            this.comFundLP.contextType = this.companyOpenSearch.attribute;
            this.comFundLP.fundId = this.fundId;
            this.comFundLP.status  = 1;
            if (this.comFundLP.id) {
                this.update();
            } else {
                this.save();
            }
        }  
    }
    // 添加接口
    public async save() {
        const { resCode } = await ComFundService.saveComFundLp(this.comFundLP);
        if (resCode === '0') {
            this.$message.success('添加成功！');
            this.outerVisible = false;
            this.getComLpList();
        }
    }
     // 修改接口
    public async update() {
        const { resCode } = await ComFundService.updateComFundLp(this.comFundLP);
        if (resCode === '0') {
            this.$message.success('修改成功！');
            this.outerVisible = false;
            this.getComLpList();
        }
    }
    // 删除lp
    public goDelete(id: number) {
        this.$confirm('是否删除此条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.delete(id);
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            });          
        }); 
    }
    // 删除接口
    public async delete(id: number) {
        const { resCode } = await ComFundService.deleteLp(id);
        if (resCode === '0') {
            this.$message.success('删除成功!');
            this.getComLpList();
        }
    }
    // 选择一行lp信息
    public selectLp(row: CompanyOpenSearchVO) {
        this.comFundLP.lpCompanyId = row.id;
        this.companyOpenSearch.name = row.fullName;
        this.innerVisible = false;
    }
    // 小分页
    public handleCurrentChangeLp(val: number) {
        this.searchPageIndex = val;
        this.searchFundInfoEvent();
    }
    // 编辑
    public goEdit(row: any) {
        this.outerVisible = true;
        this.comFundLP.id = row.id;
        this.$set(this.companyOpenSearch, 'attribute', row.contextType); 
        this.companyOpenSearch.attribute = row.contextType;
        this.companyOpenSearch.name = row.companyName;
        this.comFundLP.promiseMoney = row.promiseMoney;
        this.$set(this.comFundLP, 'promiseMoneyCurrency', row.promiseMoneyCurrency);
        this.$set(this.comFundLP, 'investmentAmountCurrency', row.investmentAmountCurrency);
        this.comFundLP.investmentAmount = row.investmentAmount;
    }
    // 关联关系
    public related(row: any) {
        let message: string = '';
        let  status: number = 1;
        if (row.status === 1) {  //有关联关系 需要解除关联
            message = '确定取消关联？';
            status = 2;
        } else { // 没有关联关系 需要关联
            message = '确定信息关联？';
            status = 1;
        }
        this.$confirm(message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then(() => {
            this.comFundLP = row;
             this.comFundLP.status = status;
            this.update();
        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>